<template>
  <div class="h-full w-full">
    <div class="h-1/10 w-full flex items-center justify-between">
      <div>
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[12, 20, 30, 40]"
          size="default"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div>
        <el-button type="primary" color="#b4b4e5" size="large" @click="refresh">
          <img src="/src/assets/svg/007.svg" class="w-8 mr-2" />
          刷新
        </el-button>
        <#if !readOnly>
          <el-button
            type="primary"
            color="#b4b4e5"
            size="large"
            @click="dialogVisible = !dialogVisible"
          >
            <img src="/src/assets/svg/006.svg" class="w-5 mr-2" />
            新增${tableNameCn}
          </el-button>
        </#if>
      </div>
    </div>
    <div class="w-full h-9/10 overflow-auto">
      <el-table
        v-loading="loading"
        element-loading-text="加载中..."
        class="rounded-2xl"
        :data="${domain}List"
        style="width: 100%"
        border
        stripe
        size="large"
      >
        <#list fieldList as field>
          <el-table-column prop="${field.nameHump}" label="${field.nameCn}" <#if field.javaType=='String' || field.javaType=='Long' || field.javaType=='Date' || field.javaType=='BigDecimal'>show-overflow-tooltip</#if>>
            <#if field.enums>
              <template #default="scope">
                <!-- 根据${field.enumsConst}_ARRAY -->
                {{ ${field.enumsConst}_ARRAY.find((item) => item.code === scope.row.${field.nameHump})?.desc || '未知类型' }}
              </template>
            </#if>
          </el-table-column>
        </#list>
        <#if !readOnly>
          <el-table-column label="操作" class="flex">
            <template #default="scope">
              <div>
              <el-button size="small" @click="edit(scope)">编辑</el-button>
              </div>
              <div>
              <el-popconfirm
                title="确认删除吗？"
                :icon="InfoFilled"
                icon-color="#626AEF"
                cancel-button-text="取消"
                confirm-button-text="确认"
                confirm-button-type="success"
                @confirm="delete${Domain}(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" size="small">删除</el-button>
                </template>
              </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </#if>
      </el-table>
    </div>
  </div>
  <#if !readOnly>
    <el-dialog
      v-model="dialogVisible"
      title="${tableNameCn}"
      width="400"
      :before-close="handleClose"
      align-center
    >
      <el-form size="large" :model="${domain}Form">
        <#list fieldList as field>
          <#if field.name!="id" && field.nameHump!="createTime" && field.nameHump!="updateTime">
            <el-form-item label="${field.nameCn}" prop="${field.nameHump}">
              <#if field.enums>
                <el-select placeholder="请选择${field.nameCn}" v-model="${domain}Form.${field.nameHump}">
                  <el-option
                    v-for="item in ${field.enumsConst}_ARRAY"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code"
                  ></el-option>
                </el-select>
              <#elseif field.type=='time'>
                <el-time-picker v-model="${domain}Form.${field.nameHump}" placeholder="请输入${field.nameCn}" value-format="HH:mm:ss"/>
              <#elseif field.type=='date'>
                <el-date-picker v-model="${domain}Form.${field.nameHump}" type="date" placeholder="请输入${field.nameCn}" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
              <#else>
                <el-input placeholder="请输入${field.nameCn}" v-model="${domain}Form.${field.nameHump}"></el-input>
              </#if>
            </el-form-item>
          </#if>
        </#list>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm" color="#b4b4e5" :loading="loading1">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </#if>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
<#list fieldList as field>
<#if field.enums>
import { ${field.enumsConst}_ARRAY } from '@/assets/ts/enums'
</#if>
</#list>
<#if !readOnly>
import { InfoFilled } from '@element-plus/icons-vue'
</#if>

const page = ref(1)
const size = ref(12)
const total = ref(0)

const loading = ref(false) // 表格加载
<#if !readOnly>
const dialogVisible = ref(false)
const loading1 = ref(false) // 新增或编辑${Domain}后加载
const loading2 = ref(false) // 删除${Domain}后加载
</#if>
const ${domain}List = ref()

interface ${Domain}Form {
  <#list fieldList as field>
  ${field.nameHump}: <#if field.javaType='String' || field.javaType='Long' || field.javaType='Date' || field.javaType='BigDecimal'>string<#elseif field.javaType='Integer'>number<#elseif field.javaType='Boolean'>boolean</#if>
  </#list>
}
const ${domain}Form = ref<${Domain}Form>({
  <#list fieldList as field>
  ${field.nameHump}: <#if field.javaType='String' || field.javaType='Long'>'',<#elseif field.javaType='Date' || field.javaType='BigDecimal'>'',<#elseif field.javaType='Integer'>0,<#elseif field.javaType='Boolean'>false,</#if>
  </#list>
})
<#if !readOnly>
// 编辑${Domain}信息
const edit = (scope: any) => {
  dialogVisible.value = true
  ${domain}Form.value = scope.row
}
</#if>
<#if !readOnly>
// 删除${Domain}信息
const delete${Domain} = (id: string) => {
  loading2.value = true
  axios.delete(`/${module}/admin/${do_main}<#noparse>/delete/${id}`</#noparse>).then((res) => {
    loading2.value = false
    if (res.data.success) {
      ElMessage.success('删除成功')
      query${Domain}List()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
</#if>
// 刷新${Domain}表格
const refresh = async () => {
  try {
    await query${Domain}List()
    ElMessage.success('刷新成功')
  } catch (e) {}
}
<#if !readOnly>
// 清空dialog中的${Domain}Form表单
const clear${Domain}Form = () => {
  ${domain}Form.value = {
    <#list fieldList as field>
    ${field.nameHump}: <#if field.javaType == 'String' || field.javaType == 'Date' || field.javaType == 'Long' || field.javaType == 'BigDecimal'>''<#elseif field.javaType == 'Integer'>0<#elseif field.javaType == 'Boolean'>false<#else>null</#if>,
    </#list>
  }
}
</#if>
// 查询${Domain}列表
const query${Domain}List = () => {
  loading.value = true
  return axios
    .get('/${module}/admin/${do_main}/query-list', {
      params: {
        page: page.value,
        size: size.value,
      },
    })
    .then((res) => {
      loading.value = false
      ${domain}List.value = res.data.content.list
      total.value = res.data.content.total
    })
    .catch((error) => {
      loading.value = false
      throw error
    })
}
// 页面加载时查询${Domain}列表
onMounted(async () => {
  await query${Domain}List()
})
<#if !readOnly>
// 关闭dialog前的操作
const handleClose = () => {
  dialogVisible.value = false
  clear${Domain}Form()
  query${Domain}List()
}
// 取消编辑或新增${Domain}
const cancel = () => {
  handleClose()
}
// 新增或编辑${Domain}
const confirm = () => {
  loading1.value = true
  axios.post('/${module}/admin/${do_main}/save', ${domain}Form.value).then((res) => {
    loading1.value = false
    if (res.data.success) {
      query${Domain}List()
      ElMessage.success('操作成功')
      handleClose()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
</#if>
// 分页器
const handleSizeChange = (val: number) => {
  size.value = val
  query${Domain}List()
}
// 分页器
const handleCurrentChange = (val: number) => {
  page.value = val
  query${Domain}List()
}
</script>

<style lang="scss" scoped></style>